<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02v-on</title>
</head>

<body>
    <h2>事件绑定</h2>
    <ul>
        <li>v-on用于绑定事件处理函数</li>
        <li>语法：v-on:事件名="事件函数"</li>
        <li>简写：v-on:可以简写成@，那么v-on:click简写成@click</li>
    </ul>
    <h2>绑定事件函数的细节</h2>
    <ul>
        <li>推荐把事件函数写在methods里面，虽然定义在vue对象外面的普通函数，也可以作用v-on绑定的事件函数，但是严重不推荐。</li>
        <li></li>
        <li></li>
    </ul>
    <h2>关于事件函数的形式参数（仅讨论函数定义在methods中的情况）</h2>
    <ul>
        <li>情形一：v-on:事件名="函数名"，函数名后面没有显示填写参数时，第一个参数就是事件对象（window.event），不推荐如此使用。</li>
        <li>情形二：开发时，推荐进行显示传参。此处可以使用data中定义的参数，或者字面量。也可以使用$event占位符。</li>
        <li>$event: 显示地传递事件对象。（推荐传递事件对象的方法）</li>
    </ul>
    <h2>vue对象中，methods的作用</h2>
    <ul>
        <li>作用一：可以返回结果，然后使用vue的模板语法，将结果展示在DOM上，也可以使用v-bind指令将结果绑定为标签的属性值。</li>
        <li>作用一：作为事件绑定的函数。</li>
    </ul>
    <main id="app">
        <div :title="getTitle()">{{getTitle()}}</div>
        <button v-on:click="handleClick(param,13,$event)">点击我</button>
        <button @click="handleClick">点击我</button>
    </main>
</body>
<script src="../vue.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            param: {
                name:"Hydra",
                age: 35,
            }

        },
        methods: {
            getTitle() {
                return "我是一个DIV";
            },
            handleClick(param1,param2,param3) {
                console.log("param1 =",param1);
                console.log("param2 =",param2);
                console.log("param3 =",param3);
                console.log("我被点击了！");
            }
        }
    })
</script>

</html>